Vue.component("HeaderRightNav",{
    // 自定义组件：template必须有，其余配置属性和普通vue对象一样
    template: `
        <ul class="header-right-ul">
            <li v-for="item in arr">{{item}}</li>
        </ul>
    `,
    // data必须是一个方法返回一个对象（普通vue的直接定一个对象，在2.6x后开始会直接报错）
    data() {
        return {
            arr: ["信息公开","互动交流","人才招聘"]
        }
    }
});

Vue.component("header-input",{
    template: `
        <div class="inputs">
            <input>
            <span>查询</span>
        </div>
    `,
});


Vue.component("header-top",{
    template: `
        <header class="header-top">
            <img src="https://www.forerunnercollege.com/so/static/img/logo.7d1b3df0.png">
            <div class="header-right">
                <header-right-nav></header-right-nav>
                <header-input>
            </div>
        </header>
    `,
})